<!-- 失物招子组件 -->
<template>
  <div>
    <div class="clearfix">
      <div
        class="lostFound_Ul_li"
        @click="goDetail(item.id)"
        v-for="(item, index) in lostFound"
        :key="index"
      >
        <!-- 物品 -->
        <div class="lostFound_Ul_li_lostFound">
          <van-swipe lazy-render>
            <van-swipe-item
              style="height:200px;"
              v-for="(items,indexs)  in   item.imgList "
              :key="indexs"
              @click.stop="bigImg(index,indexs)"
              fit="contain"
            >
              <van-image :src="items" class="swip_img lostFound_Ul_li_lostFound_img">
                <template v-slot:loading>
                  <van-loading size="20px" vertical>加载中...</van-loading>
                </template>
              </van-image>
            </van-swipe-item>
          </van-swipe>
        </div>

        <div class="lostFound_Ul_li_lostFound_div">
          <p class="overflowMore" style="margin:  5px 0  5px 0;">物品名称:{{ item.title }}</p>
        </div>

        <!-- 用户 -->
        <div class="lostFound_Ul_li_user">
          <img :src="item.user.avatar" alt />
          <span>姓名:{{ item.user.username }}</span>
        </div>

        <div style="width: 100%; padding: 0 3px">
          <p class="overflowSingle" style="font-size: 12px; width: 100%">邮箱:{{ item.user.email }}</p>
          <p class="overflowSingle" style="font-size: 14px">电话:{{ item.user.phone }}</p>
        </div>
        <!-- 丢失时间 -->
        <div class="lostFound_Ul_li_date">遗失时间：{{ formatDateTime(item.lostTime) }}</div>
      </div>
    </div>

    <el-pagination
      background
      v-show="lostFound.length > 0"
      class="pagination"
      layout="total, prev, pager, next"
      @current-change="handleCurrentChange"
      :currentPage="currentPage"
      :page-size="pageSize"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import myheader from './myheader.vue'
import formatDateTime from '../utils/data'
import { ImagePreview } from 'vant'
export default {
  components: {
    myheader,
  },
  // 接受父组件传递的数据
  props: {
    lostFound: {
      type: Array, // 渲染的列表值
    },
    currentPage: {
      type: Number, // 当前现实页码数
    },
    total: {
      type: Number, // 总数
    },
    pageSize: {
      type: Number, // 每页显示数据
    },
    pageCount: {
      type: Number, // 共有几页
    },
    // images: {
    //   type: Array, // 共有几页
    // },
  },

  data() {
    return {
      currentPages: 0,
    }
  },
  watch: {
    currentPage: function (newVal) {
      this.currentPages = newVal
    },
  },

  methods: {
    //日期格式化
    formatDateTime(val) {
      return formatDateTime.formatDateTime5(val)
    },

    // 分页处理
    handleCurrentChange(val) {
      this.currentPages = val // 可以不写 直接 this.$emit("getLost",val)
      console.log('currentPage-------' + this.currentPage)
      this.$emit('getLost', this.currentPages)
    },
    // 跳转详情页面
    goDetail(itemId) {
      this.$router.push('/detail/' + itemId)
    },
    // 大图
    bigImg(index, indexs) {
      ImagePreview({
        images: this.lostFound[index].imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
  },
}
</script>

<style scoped>
.lostFound_Ul {
  width: 100%;
  clear: both;
}
.lostFound_Ul_li {
  padding: 20px;
  width: 50%;
  padding-left: 2%;
  padding-right: 2%;
  float: left;
}
.lostFound_Ul_li_date {
  font-size: 14px;
  color: #a1a1a1;
}

/* 东西的照片 */
.lostFound_Ul_li_lostFound {
  width: 100%;
}
.lostFound_Ul_li_lostFound_img {
  display: block;
  width: 100%;
  height: 160px;
}
.lostFound_Ul_li_lostFound_div {
  font-size: 16px;
}
/* 用户 */
.lostFound_Ul_li_user {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  align-items: center;
}
.lostFound_Ul_li_user > img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.lostFound_Ul_li_user > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}
.pagination {
  clear: both;
  margin: 30px 0 10px 0;
}
</style>
